import React from 'react'
import ReactDOM from 'react-dom'
import fetch from 'isomorphic-fetch'
import { SearchOutlined} from '@ant-design/icons';
import { Input,Menu, Dropdown, Icon , List, Avatar,Button,Carousel,Select,notification} from 'antd';
import bg from './../img/newsucai/bg1.png'


var storage = window.localStorage;

const { Option } = Select;
class Tv_login extends React.Component {
  constructor(props) {
    super(props)

  }

  state = {
    sfz:"",
    openid:"",
    corplistdata:[],
    corpid:"",              
  formdata:{username:"",password:""},
    deviceno:""
  }

  



  handlepassword=()=>{
    if(event && event.target && event.target.value){
      let value = event.target.value;
     // alert(value)
     this.setState(()=>({password:value }))
   }

 }


 handlechange_normal=(key,e)=>{
  //this.openNotification(e.target.value)
  let data = Object.assign({}, this.state.formdata, { [key]: e.target.value});
  this.setState({formdata:data})
};

 checkdatavalid=(...args)=>{
for (let item of args) {    //for of 推荐用在遍历数组
  var checkvalue=this.state.formdata[item]
  if(checkvalue==""||checkvalue==null||checkvalue==undefined)
   return false;
}
return true;
};




//这个日期字符串获取更好用，根据需求返回三种1：年月日 2年月日时分秒 31970开始时间秒数用作id
getCurrentDate=(format)=> {
  var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth();//得到月份
    var date = now.getDate();//得到日期
    var day = now.getDay();//得到周几
    var hour = now.getHours();//得到小时
    var minu = now.getMinutes();//得到分钟
    var sec = now.getSeconds();//得到秒
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    if (hour < 10) hour = "0" + hour;
    if (minu < 10) minu = "0" + minu;
    if (sec < 10) sec = "0" + sec;
    var time = "";
    //精确到天
    if(format==1){
      time = year + "-" + month + "-" + date;
    }
    //精确到分
    else if(format==2){
      time = year + "-" + month + "-" + date+ " " + hour + ":" + minu + ":" + sec;
    }
    else if(format==3){
      time = now.getTime();
    }
   else if(format==4){
      time = year +"--" + month   +"--" + date;
    }

    return time;
  }

//通用提醒
openNotification = (text) => {notification.open({message: '提示',description:text,onClick: () => {},});};



handlelogin=(cx)=>{

window.location.href="http://111.77.154.58:2233/#/tv?cx="+cx

}

tonormal=(route)=>{
    this.props.history.push(route)
}



querycorplist=()=>{
   fetch("/admin/customlist/getcorplist", {
    method: 'POST',
    mode: 'cors',
    // credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({"data":this.state})
  }
  ).then(response =>
  {

   return response.json();
 }).then(data=>{
this.setState({
 corplistdata:data.rows
});
 
});


}


handlechangeSelect_normal_cx=(key,value,option)=> {

 storage.logincx=value;

};


handlechangeSelect_normal_bb=(key,value,option)=> {

 storage.loginbb=value;

};


handleKeyDown = (e) => {
    if (e.keyCode === 13) {
       this.handlelogin()
    }
}

componentDidMount(){
    //this.getwxconfig();
document.addEventListener('keydown',this.handleKeyDown);


 storage.loginbb="A班";
 storage.logincx="1#线";

  
  //this.querycorplist();

   if(storage.nowurl!=window.location.href)
    {storage.nowurl=window.location.href;
      window.location.reload()
      
    }

}

componentWillUnmount() {
    document.removeEventListener('keydown',this.handleKeyDown);
}

inputOnBlur=()=>{
  window.scroll(0,0);
}


render() {
    const options = this.state.corplistdata.map(d =><Option value={d.ID}>{d.CORPNAME}</Option>);


  return (
    <div>
    <div style={{width:"100vw",height:"33vh",backgroundImage:`url(${bg}) `,position:"relative",backgroundSize:"100% ",
    fontSize:"2rem",textAlign:"center",color:"white",overflow:"hidden"}}> 
    <div style={{height:"3vh",position:"relative",left:"0",top:"8vh",backgroundColor:""}} >
</div>


    <div style={{height:"12vh",position:"relative",left:"5vw",top:"6vh",backgroundColor:""}} >
    <h1 style={{fontSize:"1.4rem",textAlign:"left",color:"white",fontWeight:"100",height:"1.3rem"}}>春华汽配</h1>
    <h1 style={{fontSize:"1.4rem",textAlign:"left",color:"rgb(254,209,0)",fontWeight:"700",height:"1.3rem"}}>MES云平台</h1>

</div>
    </div>


    <div style={{width:"90vw",height:"67vh",position:"relative",backgroundImage:"linear-gradient(to bottom, white , #F0F0F0)",
    fontSize:"2rem",textAlign:"left",color:"white",marginLeft:"5vw"}}> 

 
{/*    <Input onBlur={this.inputOnBlur} style={{backgroundColor:"white",position:"relative",
    width:"72%",left:"0",right:"0",margin:"0",height:"2rem"}}  value={this.state.deviceno}
    placeholder="扫描或者输入工位编号" onChange={event=>this.handledeviceno(event)}/>*/}
  
 
   
        <Button type="primary" onClick={()=>{this.handlelogin("1")}} 
    style={{position:"relative",height:"6rem",fontSize:"1.2rem",width:"20%",left:"0",borderRadius:"10px",
    right:"0",margin:"auto",color:"rgb(254,209,0)",marginTop:"2%",marginLeft:"2%"}} 
    large><strong>1线包装看板</strong></Button>

        <Button type="primary" onClick={()=>{this.handlelogin("2")}} 
    style={{position:"relative",height:"6rem",fontSize:"1.2rem",width:"20%",left:"0",borderRadius:"10px",
    right:"0",margin:"auto",color:"rgb(254,209,0)",marginTop:"2%",marginLeft:"2%"}} 
    large><strong>2线包装看板</strong></Button>

        <Button type="primary" onClick={()=>{this.handlelogin("3")}} 
    style={{position:"relative",height:"6rem",fontSize:"1.2rem",width:"20%",left:"0",borderRadius:"10px",
    right:"0",margin:"auto",color:"rgb(254,209,0)",marginTop:"2%",marginLeft:"2%"}} 
    large><strong>3线包装看板</strong></Button>


        <Button type="primary" onClick={()=>{this.handlelogin("4")}} 
    style={{position:"relative",height:"6rem",fontSize:"1.2rem",width:"20%",left:"0",borderRadius:"10px",
    right:"0",margin:"auto",color:"rgb(254,209,0)",marginTop:"2%",marginLeft:"2%"}} 
    large><strong>4线包装看板</strong></Button>

    <br/>

       <Button type="primary" onClick={()=>{this.tonormal("/ck_chart_menu")}} 
    style={{position:"relative",height:"6rem",fontSize:"1.2rem",width:"20%",left:"0",borderRadius:"10px",
    right:"0",margin:"auto",color:"rgb(254,209,0)",marginTop:"2%",marginLeft:"2%"}} 
    large><strong>仓库看板</strong></Button> 

    

       <Button type="primary" onClick={()=>{this.tonormal("report_charts_ck")}} 
    style={{position:"relative",height:"6rem",fontSize:"1.2rem",width:"20%",left:"0",borderRadius:"10px",
    right:"0",margin:"auto",color:"rgb(254,209,0)",marginTop:"2%",marginLeft:"2%"}} 
    large><strong>仓库可视化图表</strong></Button>  
 




 



    </div>

    </div>
    )
}
}

export default Tv_login
//styles
var styles={
  containertyle:{
    height:"92vh",width:"100vw",position:"absolute",
    left:"0",right:"0",margin:"auto",
    top:"0",backgroundImage:"linear-gradient(to bottom right, #00AAEB , #A28CB9)"
  }

}






